<template>
    <el-card>
        <template #header>
            <el-button class="btn" type="primary" icon="Plus" @click="editTrademark.open()">添加品牌</el-button>
        </template>
        <el-table border height="100%" :data="trademarks">
            <el-table-column label="序号" type="index" align="center" width="100" />
            <el-table-column label="品牌名称" prop="tmName" align="center" />
            <el-table-column label="品牌LOGO" align="center">
                <template #default="{ row }">
                    <img class="logo" :src="row.logoUrl">
                </template>
            </el-table-column>
            <el-table-column prop="address" label="品牌操作" align="center">
                <template #default="{ row }">
                    <el-button icon="Edit" type="primary" @click="editTrademark.open(row)"></el-button>
                    <el-popconfirm title="确认删除?" @confirm="del(row.id)">
                        <template #reference>
                            <el-button icon="Delete" type="danger"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-pagination :total="total" v-model:page-size="pageSize" v-model:current-page="pageNo"
                :default-page-size="defaultPageSize" :page-sizes="[10, 20, 50, 100]" background
                layout="prev, pager, next,jumper, ->,sizes,total" />
        </template>
    </el-card>

    <EditTrademark ref="editTrademark" :onSuceess="onEditSuccess"></EditTrademark>
</template>

<script setup lang="ts">
import { reqDelTrademark, reqTrademarks, type Trademark } from '@/api/product/trademark';
import { ElMessage } from 'element-plus';
import { onMounted, ref, watch } from 'vue';
import EditTrademark from './editTrademark.vue';

const editTrademark = ref()

const defaultPageSize = 10;
const pageNo = ref(1)
const pageSize = ref(defaultPageSize)
const total = ref(0)
const trademarks = ref<Trademark[]>([])

onMounted(async () => getPageData());

watch([pageNo, pageSize], async () => getPageData())

const getPageData = async () => {
    const result = (await reqTrademarks(pageNo.value, pageSize.value)).data;
    if (result.ok) {
        total.value = result.data.total;
        trademarks.value = result.data.records;
    }
}

const onEditSuccess = (inserted: boolean) => {
    if (inserted) {
        pageNo.value = Math.ceil((total.value + 1) / pageSize.value)
    } else {
        getPageData()
    }
}

const del = async (id: number) => {
    const result = (await reqDelTrademark(id)).data;
    if (result.ok) {
        ElMessage({ type: 'success', message: '删除成功' })
        getPageData()
    } else {
        ElMessage({ type: 'error', message: result.data })
    }

}

</script>

<style scoped lang="scss">
::v-deep.el-card {
    height: 100%;

    .el-card__header {
        border-bottom: 0;
        padding-bottom: 0;

    }

    .el-card__body {
        height: 85%;

        .logo {
            height: 100px;
        }

    }

    .el-card__footer {
        padding-top: 0;
        border-top: 0;
    }

}
</style>
